<template>
  <div id="mainRightTop">
    <div class="bg-color-black">
      <el-form inline>
        <el-form-item>
          <el-button
              size="small"
              class="screen-btn"
              :class="{ 'active': isCurrentActive }"
              @click="handleCurrentClick"
          >
            当前
          </el-button>
        </el-form-item>
        <el-form-item label="自定义时间：">
          <el-date-picker
              v-model="queryTime"
              type="datetime"
              placeholder="选择日期时间"
              size="small"
              @change="handleTimeChange"
          ></el-date-picker>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>

export default {
  components: {},
  data() {
    return {
      queryTime: null,
      isCurrentActive: true // 控制当前按钮激活状态
    }
  },
  mounted() {
    // 初始化设置为当前时间
    this.queryTime = new Date();
  },
  methods: {
    // 点击当前按钮
    handleCurrentClick() {
      this.queryTime = new Date();
      this.isCurrentActive = true;
    },
    // 选择自定义时间
    handleTimeChange() {
      // 当选择了时间或清除选择时更新激活状态
      this.isCurrentActive = !this.queryTime;
    }
  }
}
</script>
<style lang="scss" scoped>
$box-width: 100%;
$box-height: 50px;

#mainRightTop {
  padding: 12px;
  height: $box-height;
  width: $box-width;
  border-radius: 10px;

  .bg-color-black {
    height: $box-height;
    border-radius: 10px;
    background-color: #000; // 补充黑色背景，方便查看效果
  }

}
</style>
